import { Card, Col, Row } from 'antd'
import './index.css'
import { useMemo, useState } from 'react'
import { FullscreenOutlined } from '@ant-design/icons'
import VChart from '../VChart'
import VTable from '../VTable'
import CountUp from 'react-countup'
interface CardPropsType {
  width?: number
  title?: string
  type?: string
  dataSource?: any,
  columns?:any
}
const VCard: React.FC<CardPropsType> = ({ title, 
  type,
   dataSource,
   columns
   }) => {
  // console.log(dataSource);
  const [isHovered, setIsHovered] = useState(false) // 是否hover
  const [isFullScreen, setIsFullScreen] = useState(false) // 是否全屏

  const Content = useMemo(() => {
    if (type === 'table') {
      return <VTable columns={columns} bordered={false} data={dataSource} />
    } else if (type === 'line') {
      return <VChart option={dataSource} isFullScreen={isFullScreen}></VChart>
    } else if (type === 'bar') {
      return <VChart option={dataSource} isFullScreen={isFullScreen}></VChart>
    } else
    if (type === 'pie') {
      return <VChart option={dataSource} isFullScreen={isFullScreen}></VChart>
    } else if (type === 'cards') {
      return (
        <Row gutter={[16, 24]} style={{"flex":"1 1 auto"}}>
        {dataSource.map((item: any, index: number) => {
          return (
            <Col flex={"1 1 auto"} key={`${title}状态${index}`}>
              <Card title={title+item.status} bordered={false}>
                <div className="cardContent">{item.count}</div>
              </Card>
            </Col>
          )
        })}
  
      </Row>
      )
    } else if (type === 'statisic') {
      return  <Row gutter={[16, 24]} style={{"flex":"1 1 auto"}}>
      {dataSource.map((item: any, index: number) => {
        return (
          <Col flex={"1 1 auto"} key={`${title}状态${index}`}>
            <Card title={title+item.status} bordered={false}>
              <div className="cardContent"><CountUp end={item.cost} /></div>
            </Card>
          </Col>
        )
      })}

    </Row>
    }
    else{
      <div>null</div>
    }
  }, [isFullScreen,dataSource])
  return (
    <div 
    className={`VCard-container ${isFullScreen ? 'fullscreen' : ''} ${type==="cards" ? '' : 'bg-white'}`} 
    onMouseEnter={() => setIsHovered(true)} 
    onMouseLeave={() => setIsHovered(false)}
    >
      {(type!=='cards'&& type!=='statisic') && <div className="card-title">{title}</div>}
      {isHovered && (
        <div className="card-actions">
          <FullscreenOutlined
            onClick={() => {
              setIsFullScreen(!isFullScreen)
            }}
          />
        </div>
      )}
      
      <div className="VCard-content">{Content}</div>
    </div>
  )
}
export default VCard
